<template>
    <div class="recommend-container">
        <TmallNavBar>
            <template #left><i class="icon iconfont icon-zuojiantou"></i></template>
            <template #default>{{ currentRecommend.title }}</template>
        </TmallNavBar>

        <div class="header-container">
            <!-- 推荐封面图 -->
            <div class="cover">
                <van-image :src="global.MINIO_FILE_DOMAIN + currentRecommend?.banner_picture" />
            </div>
    
            <!-- 推荐选项 -->
            <div class="tabs">
                <span 
                    @click="selectTab(tab.id)"
                    class="text"
                    :class="{active: params.goods_label_id == tab.id}"
                    v-for="(tab, index) in currentRecommend?.tabs"
                    :key="index"
                >
                    {{ tab.name }}
                </span>
            </div>
        </div>
  
        <!-- 推荐列表 -->
        <div class="scroll">
            <div>

                <!-- 骨架屏 -->
                <van-skeleton v-if="isLoading">
                    <template #template>
                        <div class="goods">
                            <div class="navigator" v-for="(item) in skeletonLength" :key="item" >
                                <div class="image-box" style="margin-bottom: 5px;">
                                    <van-skeleton-image class="image" style="width: 100%;"/>
                                </div>
                                <div>
                                    <van-skeleton-paragraph style="height: 30px;"/>
                                    <van-skeleton-paragraph style="margin-top: 10px;" row-width="40%"/>
                                </div>
                            </div>
                        </div>
                    </template>
                </van-skeleton>
                
                <div v-else>
                    <!-- 推荐列表 -->
                    <div class="goods" v-if="recommendList.length > 0">
                        <div class="navigator" v-for="goods in recommendList" :key="goods.goods_id"
                            @click="$router.push('/goodsDetail?goods_id='+goods.goods_id)"
                        >
                            <div class="image-box">
                                <img class="image" v-img-lazy="global.MINIO_FILE_DOMAIN + goods.cover_url"/>
                            </div>
                            <div class="name">{{ goods.goods_name }}</div>
                            <div class="price">
                                <span class="symbol">¥</span>
                                <span class="number">{{ (goods.price/100).toFixed(2) }}</span>
                            </div>
                        </div>
                    </div>
            
                    <!-- 空状态 -->
                    <div class="blank" v-else>
                        <van-image :src="blankImage" class="image" />
                        <span class="text">没有找到您想要的商品哟</span>
                        <van-button class="button" to="/">去首页看看</van-button>
                    </div>
                </div>

        
                <!-- 加载文本 -->
                <div class="loading-text" v-if="params.page_size < total">
                    {{ finish ? '我也是有底线的~' : '正在加载...' }}
                </div>
            </div>
        </div>
    
        <!-- 返回顶部组件 -->
        <TmallBackTop :bottom="120"  @backTop="backTop" v-if="isShowBackTop" />
    </div>
</template>
  
<script setup>
import { reqGetRecommendAPI } from "@/apis/recommend"
import blankImage from '@/assets/images/blank.png'
import { reactive, ref, inject, onMounted } from 'vue';
import { useRoute } from 'vue-router'
import BScroll from 'better-scroll'

// 全局属性
const global = inject('global')
  

// 路由
const route = useRoute()
  
  
// ----------------------- 返回顶部开始 -----------------------
const backTop = () => {
    bscroll.scrollTo(0, 0, 500)
}
// ----------------------- 返回顶部结束 -----------------------
  
  
  
  
  
  
// ----------------------- 获取推荐功能开始 -----------------------

const skeletonLength = ref(6)

// 热门推荐页 标题和url
const recommends = [
{ 
    type: 1, 
    title: '特惠推荐', 
    banner_picture: 'trident/static/upload_images/2023-08-06/658defeb-6df2-4fe3-9440-0be40ad9f65f.jpg',
    tabs: [
    {
        id: 10,
        name: '抢先尝鲜',
    },
    {
        id: 8,
        name: '新品预告',
    }
    ]
},
{ 
    type: 2, 
    title: '爆款推荐', 
    banner_picture: 'trident/static/upload_images/2023-08-06/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg',
    tabs: [
    {
        id: 1,
        name: '24小时热榜',
    },
    {
        id: 2,
        name: '热销总榜',
    },
    {
        id: 7,
        name: '人气周榜',
    }
    ]
},
{ 
    type: 5, 
    title: '精品推荐', 
    banner_picture: 'trident/static/upload_images/2023-08-06/73145f12-4685-4223-a105-feea8e531cf6.jpg',
    tabs: [
    {
        id: 10,
        name: '抢先尝鲜',
    },
    {
        id: 8,
        name: '新品预告',
    }
    ]
},
{ 
    type: 6, 
    title: '新款推荐', 
    banner_picture: 'trident/static/upload_images/2023-08-06/e5e01cf0-5cb0-4b7d-8c55-cae5b628affa.jpg',
    tabs: [
    {
        id: 10,
        name: '抢先尝鲜',
    },
    {
        id: 8,
        name: '新品预告',
    }
    ]
},
]

// 当前推荐
const currentRecommend = recommends.find(item => item.type == route.query.type)

// 请求参数
const params = reactive({
    recommend_type: route.query.type,
    goods_label_id: currentRecommend?.tabs[0].id,
    page: 1,
    page_size: 10,
})

// 推荐列表
const recommendList = ref([])

// 推荐数量
const total = ref(0)

// 是否加载中
const isLoading = ref(true)

// 获取推荐数据
const getRecommend = async () => {
    if (finish.value == true) {
        return
    }

    const result = await reqGetRecommendAPI(params)
    const goods = result.data.goods != null ? result.data.goods : []
    recommendList.value.push(...goods)
    total.value = result.data.total
    // skeletonLength.value = result.data.total
    if (params.page < result.data.page_total) {
        params.page++
    } else {
        finish.value = true
    }
}
// ----------------------- 获取推荐功能结束 -----------------------
  
  
  

let bscroll = reactive({})
// 是否显示返回顶部按钮
const isShowBackTop = ref(false)
onMounted( async () => {
    isLoading.value = true
    await getRecommend()
    isLoading.value = false
    bscroll = new BScroll(document.querySelector('.scroll'), {
        probeType: 3,
        click: true,
        pullUpLoad:true,
        pullDownRefresh: true, //开启下拉刷新
    })

    // 加载更多
    bscroll.on('pullingUp', pullingUpHandler)

    //监听下拉刷新
    bscroll.on("pullingDown", pullingDownHandler)

    // 监听滚动
    bscroll.on('scroll',(position) => {
        isShowBackTop.value = -position.y > 70;
    });
})
  
  
  
  
  
// ----------------------- 加载更多开始 -----------------------
// 完成标识
const finish = ref(false)
// 滚动触底
const pullingUpHandler = () => {
    getRecommend()
    bscroll.finishPullUp()
    bscroll.refresh()
}
// ----------------------- 加载更多结束 -----------------------
  
  
  
  
  
// ----------------------- 下拉刷新开始  -----------------------
const pullingDownHandler = async () => {

    isLoading.value = true
    // 重置数据
    params.page = 1
    params.page_size = 10
    recommendList.value = []
    finish.value = false

    // 同时请求
    await getRecommend()

    bscroll.finishPullDown()
    isLoading.value = false
}
// ----------------------- 下拉刷新结束  -----------------------
  
  
  
  
  
// ----------------------- 切换tab功能开始  --------------------
const selectTab = async (goodsLabelId) => {
    isLoading.value = true
    params.goods_label_id = goodsLabelId

    bscroll.scrollTo(0, 0, 500);

    // 重置数据
    params.page = 1
    params.page_size = 10
    recommendList.value = []
    finish.value = false

    // 同时请求
    await getRecommend()

    isLoading.value = false
}
// ----------------------- 切换tab功能结束  --------------------
</script>
  
<style scoped lang="scss">
.recommend-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 90px 0 0;
    position: fixed;
    background-color: ghostwhite;
    margin-top: 45px;
    .header-container {
        .cover {
            text-align: center;
            width: 100%;
            height: 113px;
            border-radius: 0 0 20px 20px;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
            image {
                width: 100%;
                height: 100%;
            }
        }

        .tabs {
            display: flex;
            justify-content: space-evenly;
            height: 50px;
            line-height: 45px;
            margin: 0 10px;
            font-size: 14px;
            border-radius: 5px;
            box-shadow: 0 2px 3px rgba(200, 200, 200, 0.3);
            color: #333;
            background-color: #fff;
            position: relative;
            z-index: 9;
            .text {
                margin: 0 10px;
                position: relative;
            }
            .active {
                &::after {
                    content: '';
                    width: 20px;
                    height: 2px;
                    transform: translate(-50%);
                    background-color: #27ba9b;
                    position: absolute;
                    left: 50%;
                    bottom: 12px;
                }
            }
        }
    }

    .scroll {
        height:calc(100vh - 236px);
        .goods {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            padding: 0 10px 10px;
            .navigator {
                width: 48%;
                padding: 10px;
                margin-top: 10px;
                border-radius: 5px;
                background-color: #fff;
            }
            .image-box {
                text-align: center;
                .image {
                    width: 154px;
                    height: 154px;
                }
            }
            .name {
                height: 30px;
                font-size: 13px;
            
                overflow:hidden;
                text-overflow:ellipsis;
                display:-webkit-box;
                -webkit-box-orient:vertical;
                -webkit-line-clamp:2;
            }
            .price {
                margin-top: 8px;
                line-height: 1;
                color: #cf4444;
                font-size: 15px;
            }
            .symbol {
                font-size: 70%;
            }
            .decimal {
                font-size: 70%;
            }
        }
        .loading-text {
            text-align: center;
            font-size: 14px;
            color: #666;
            padding: 10px 0 25px;
        }
        
        // 空状态
        .blank {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height: 60vh;
            .image {
                width: 200px;
                height: 141px;
            }
            .text {
                color: #444;
                font-size: 13px;
                margin: 10px 0;
            }
            .button {
                width: 120px !important;
                height: 30px;
                line-height: 30px;
                margin-top: 10px;
                font-size: 13px;
                border-radius: 30px;
                color: #fff;
                background-color: #27ba9b;
            }
        }
    }
}
</style>